<!DOCTYPE html>
<html>
   <head lang="zh-CN"> 
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="font-awesome插件/css/font-awesome.min.css">
     <link rel="stylesheet" href='css/owl.carousel.css'>
     <link rel="stylesheet" href='css/owl.theme.css'>
     <link rel="stylesheet" href='css/style.min.css'>
     <link rel="stylesheet" href='css/respons.min.css'>
     <link rel="stylesheet" href="css/animate.min.css">


      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

     <title>lucy</title>
   </head>
   <body>
      <header id="header">
        <dv class="toplogo">
          <div class="container">
            <div class="col-md-11 col-xs-10">
              <a href=""><span id="logo"><strong>L</strong>UCY</span></a>
            </div>
            <div class="col-md-1 col-xs-2">
              <span id="openbtn"><i class="fa fa-reorder fa-2x"></i></span>
            </div>
          </div>
        </dv>
      	<div class="container">	
      		<div class="row">
      			<div class="col-md-6 head-logo hidden-xs hidden-sm">
      				<img src="img/LUCY2.png" class="logoR animated">
      			</div>
      			<div class="col-md-6 head-des col-xs-12" style="perspective: 1200px;">
      				<h1 class="zoomZ animated"><strong>One Touch For</strong>
                         <br>All Needs</h1>
      				<p>Lucy has been downloaded and loved by over 10M+ people from 130 countries all over the world in last 3 months. Download this free app on your Android and iOS device. Reviews and ratings are much appreciated. </p>
      				<a href="" class="btn enterL animated"><i class="fa fa-android  fa-3x  fa-pull-left"></i>
                     <strong>Get it on</strong><br>Google Play
      				</a>
      				<a href="" class="btn enterR animated"><i class="fa fa-apple fa-3x fa-pull-left "></i>
					<strong>Get it on</strong><br>Apple Store
      				</a>
      			</div>
      		</div>
      	</div>
      </header>

       <section id="features">
       	<div class="container" style="perspective: 1400px;">
       		<h2 class="animated">FEATURES</h2>
       			<span></span>
       			<span></span>
       			<div class="lucyImg"><img class="animated" src='img/feature.png'></div>
       			<p>Use Lucy – the Best Responsive App Landing Page to embed your game’s or app’s review videos. </p>
       			<div class="row">
       			<div class="col-md-4 text-introL">
       				<div class="text-intro text-right ">
       					 <h3>Responsive design</h3>
       					 <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted.</p>
       					 <span class="icon-posR"><i class="fa fa-film "></i></span>
       				</div>
       				<div class="text-intro text-right">
                 <h3>6 Color schemes</h3>
                 <p>The set of ready made CSS files with different color schemes will help you in quick landing’s adaptation according to your benchmark style.</p>
                 <span class="icon-posR"><i class="fa fa-flash "></i></span>
              </div>
       				<div class="text-intro text-right">
                 <h3>PSD Is Included</h3>
                 <p>The graphic source file in PSD format is included in the archive.</p>
                 <span class="icon-posR"><i class="fa fa-heart "></i></span>
              </div>
       			</div>
       			<div class="col-md-4 col-md-push-4 text-introR">
                <div class="text-intro text-left ">
                 <h3>Well Documentation</h3>
                 <p>LUCY is shipped with well documented moduler codes. Meaningfull Comments in code will help you to customize it easily.</p>
                 <span class="icon-posL"><i class="fa fa-life-ring "></i></span>
              </div>
              <div class="text-intro text-left">
                 <h3>Easily Customizable</h3>
                 <p>LUCY is easy to customize. No heavy coding is required to customize it with your real contents.</p>
                 <span class="icon-posL"><i class="fa fa-lock "></i></span>
              </div>
              <div class="text-intro text-left">
                 <h3>Future Support</h3>
                 <p>We will update LUCY and fix bugs if you found one for a long time.</p>
                 <span class="icon-posL"><i class="fa fa-star "></i></span>
              </div>


            </div>
       			<div class="col-md-4 col-md-pull-4 phonecenter" style="perspective:1200px;">
               <img class="img-responsive animated " src="img/front.png" >  
            </div>
       		</div>
       		
       	</div>
       </section>
     
       <section id="special" >
         <div class="container" style="perspective: 1200px;">
           <h2 class="animated">SPECIALITY</h2>
           <span></span>
           <span></span>
           <div class="row" style="perspective: 1200px;">
             <div class='col-md-4 animated changeduration'>
                <span><i class="fa fa-plane"></i></span>
                <h3>Free App</h3>
                <p>Your project looks great on any device. Content can be easily read and a user understands freely. </p>
             </div>
            <div class='col-md-4 animated'>
                <span><i class="fa fa-usd"></i></span>
                <h3>In App Purchases</h3>
                <p>Your project looks great on any device. Content can be easily read and a user understands freely.   </p>
             </div>
            <div class='col-md-4 animated changeduration'>
                <span><i class="fa fa-motorcycle"></i></span>
                <h3>Easy to UseP</h3>
                <p>Your project looks great on any device. Content can be easily read and a user understands freely. </p>
             </div>
           </div>
         </div>
       </section>
       
       <section id="special-intro">
         <div class="container">
           <div class="row">
             <div class="col-md-6 animated">
               <img class="img-responsive" src="img/mb2.png" style="float:right">
             </div>
             <div class="col-md-6 animated">
               <h3>FREE FEATURES</h3>
               <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted.</p>
               <ul>
                 <li><i class="fa fa-chevron-right"></i> Photo Filters x 15</li>
                 <li><i class="fa fa-chevron-right"></i> Photo Frames x 3</li>
                 <li><i class="fa fa-chevron-right"></i> Time Lapse</li>
                 <li><i class="fa fa-chevron-right"></i> Photo Editor</li>
                 <li><i class="fa fa-chevron-right"></i> Photo Gallery</li>
                 <li><i class="fa fa-chevron-right"></i> Touch to Focus</li>
                 <li><i class="fa fa-chevron-right"></i> White Balance</li>
                 <li><i class="fa fa-chevron-right"></i> ISO Levels</li>
               </ul>
             </div>
           </div>
           <div class="row">
             <div class="col-md-6 text-right animated" >
               <h3>PREMIUM FEATURES</h3>
               <p>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted.</p>
               <ul>
                 <li>Photo Filters x 15 <i class="fa fa-chevron-left"></i> </li>
                 <li>Photo Frames x 3 <i class="fa fa-chevron-left"></i> </li>
                 <li>Time Lapse <i class="fa fa-chevron-left"></i> </li>
                 <li>Photo Editor <i class="fa fa-chevron-left"></i> </li>
                 <li>Photo Gallery <i class="fa fa-chevron-left"></i> </li>
                 <li>Touch to Focus <i class="fa fa-chevron-left"></i> </li>
                 <li>White Balance <i class="fa fa-chevron-left"></i> </li>
                 <li>ISO Levels <i class="fa fa-chevron-left"></i> </li>
               </ul>
             </div>
             <div class="col-md-6 animated">
               <img class="img-responsive" src="img/mb2v.png">
             </div>
           </div>
         </div>
       </section>

       <section id='intro-carousel'>
         <div class="container">
           

           <div id="owl-phone" class="owl-carousel">
              <div class="item animated"><img class="lazyOwl" data-src="img/1.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/2.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/3.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/4.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/1.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/2.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/3.jpg" alt=""></div>
              <div class="item animated"><img class="lazyOwl" data-src="img/4.jpg" alt=""></div>

           </div>
              <span style="left:0.8em"><i class="fa  fa-chevron-left"></i></span>
              <span style="right:0.8em;"><i class="fa  fa-chevron-right"></i></span>
         </div>
       </section>

       <section id="testimonial" class="text-center">
         <div class="container">
            <div id="owl-speak" class="owl-carousel">
                <div class="item">
                  <p>
                    Good camera This is a good camera app with lots of features. Got it to replace the one that came with the phone, one which froze up often. It is a little slow to boot up, and that keeps it from getting five stars. 1              
                  </p>
                  <h5>Alan Hausser</h5>
                </div>
                <div class="item">
                  <p>
                    Good camera This is a good camera app with lots of features. Got it to replace the one that came with the phone, one which froze up often. It is a little slow to boot up, and that keeps it from getting five stars.2
                  </p>
                  <h5>Alan Hausser</h5>
                </div>
                <div class="item">
                  <p>
                    Good camera This is a good camera app with lots of features. Got it to replace the one that came with the phone, one which froze up often. It is a little slow to boot up, and that keeps it from getting five stars.3
                  </p>
                  <h5>Alan Hausser</h5>
                </div>
            </div>
            <div class="test">
              <ul>
                <li><span><img class="img-circle img-responsive bgopacity" src="img/test1.png"></span></li>
                <li><span><img class="img-circle img-responsive" src="img/test2.png"></span></li>
                <li><span><img class="img-circle img-responsive" src="img/test3.png"></span></li>
              </ul>
            </div>
         </div>
       </section>

      <section id="develop">
        <div class="container" style="perspective: 1200px;">
          <h2 class="animated">DEVELOPMENT TEAM</h2>
          <span></span>
          <span></span>
          <div class="row">
            <div class="col-sm-4">
              <div class="person animated">
                 <img class="img-responsive" src="img/team1.png">
                 <img class="img-responsive icon-p" src='img/icon-p.png'>
                 <div class="img-hover">
                   <ul>
                     <li><a><i class="fa fa-facebook"></i></a></li>
                     <li><a><i class="fa fa-git"></i></a></li>
                     <li><a><i class="fa fa-linkedin"></i></a></li>
                     <li><a><i class="fa fa-qq"></i></a></li>
                   </ul>
                   <img class="img-responsive icon-m" src='img/icon-m.png'>
                 </div>
              </div>

              <h3>Jhon Doe</h3>
              <p>DEVELOPER</p>
            </div>
            <div class="col-sm-4" style="perspective: 1200px;">
              <div class="person animated">
                 <img class="img-responsive" src="img/team2.png">
                 <img class="img-responsive icon-p" src='img/icon-p.png'>
                 <div class="img-hover">
                   <ul>
                     <li><a><i class="fa fa-facebook"></i></a></li>
                     <li><a><i class="fa fa-git"></i></a></li>
                     <li><a><i class="fa fa-linkedin"></i></a></li>
                     <li><a><i class="fa fa-qq"></i></a></li>
                   </ul>
                   <img class="img-responsive icon-m" src='img/icon-m.png'>
                 </div>
              </div>
              <h3>Riyana</h3>
              <p>DEVELOPER</p>
            </div>
            <div class="col-sm-4">
              <div class="person animated">
                 <img class="img-responsive" src="img/team3.png">
                 <img class="img-responsive icon-p" src='img/icon-p.png'>
                 <div class="img-hover">
                   <ul>
                     <li><a><i class="fa fa-facebook"></i></a></li>
                     <li><a><i class="fa fa-git"></i></a></li>
                     <li><a><i class="fa fa-linkedin"></i></a></li>
                     <li><a><i class="fa fa-qq"></i></a></li>
                   </ul>
                   <img class="img-responsive icon-m" src='img/icon-m.png'>
                 </div>
              </div>
              <h3>RobertSmith</h3>
              <p>DEVELOPER</p>
            </div>
          </div>
        </div>
      </section>

     <section id="price">
       <div class="container">
        <div class="row">

         <div class="col-sm-4">
          <div class="price-tag animated" style="animation-delay: .2s;">
           <h3 class="theme-sty1">Standard</h3>
           <span>$2.99
            <small>per month</small></span>
           <ul>
             <li>Responsive</li>
             <li>Documentation</li>
             <li class="not">Multiplatform</li>
             <li class="not">Video background</li>
             <li class="not">Support</li>
           </ul>
           <a><i class="fa fa-shopping-cart fa-2x"></i></a>
          </div>
         </div>

         <div class="col-sm-4">
          <div class="price-tag animated" style="animation-delay: .6s;">
           <div class="starR"><i class="fa fa-star-o"></i><h6 >Best choice</h6></div>
           <h3 class="theme-sty2">Gold</h3>
           <span>$7.99
            <small>per month</small></span>
           <ul>
             <li>Responsive</li>
             <li>Documentation</li>
             <li>Multiplatform</li>
             <li>Video background</li>
             <li>Support</li>
           </ul>
           <a><i class="fa fa-shopping-cart fa-2x"></i></a>
          </div>
         </div>
  
         <div class="col-sm-4">
          <div class="price-tag animated" style="animation-delay: .4s;">
           <h3 class="theme-sty3">Sliver</h3>
           <span>$4.99
            <small>per month</small></span>
           <ul>
             <li>Responsive</li>
             <li>Documentation</li>
     >Multiplatform</li>
             <li class="not">Video background</li>
             <li class="not">Support</li>
           </ul>
           <a><i class="fa fa-shopping-cart fa-2x"></i></a>
          </div>
         </div>

       </div>
      </div>
     </section>
     
     <section id="contact">
       <div class="container">
         <div class="row">
             <div class="col-sm-6 ">
               <div class="col-md-6 contact-way animated">
                <span><i class="fa fa-map-marker "></i></span>
                <h3>Address</h3>
                <p>Lamabazar, 353<br>Monuntain View, USA</p>
                <div class="clearfix"></div>
               </div>

               <div class="col-md-6 contact-way animated">
                <span><i class="fa fa-phone "></i></span>
                <h3>Phone</h3>
                <p>Local: 1-200-123-hello<br>Mobile: 2-800-123-hello </p>
                <div class="clearfix"></div>
               </div>
             </div>

              <div class="col-sm-6 ">
               <div class="col-md-6 contact-way animated">
                <span><i class="fa fa-university"></i></span>
                <h3>Fax </h3>
                <p>Office: 2148-287-8300<br>Home: 2528-782-8200 </p>
                <div class="clearfix"></div>
               </div>

               <div class="col-md-6 contact-way animated">
                <span><i class="fa fa-envelope-o"></i></span>
                <h3>Email Address</h3>
                <p>info@themewagon.com<br>www.themewagon.com</p>
                <div class="clearfix"></div>
               </div>
              </div>
         </div>

         <div class="contact-form">
           
           <form>
              <div class="form-group">
                 <h3 class="col-sm-12">Leave A Message</h3>
                 <div class="col-sm-4">
                  <input type="text" class="form-control " placeholder="First Name">
                </div>
                 <div class="col-sm-4">
                  <input type="text" class="form-control " placeholder="Email address">
                </div>
                 <div class="col-sm-4">
                  <input type="text" class="form-control " placeholder="Your website">
                </div>
                <div class="col-sm-12">
                 <textarea class="form-control " name="" id="" cols="30" rows="10" placeholder="Write message"></textarea>
                 <a>SEND MESSAGE</a>
               </div>
              </div>   
            
           </form>
         </div>
       </div>
     </section>

     <footer id="footer">
       <div class="container" style="perspective: 1200px;">
         <h3 class="animated">LUCY</h3>
         <ul>
           <li class="animated"><i class="fa fa-facebook fa-fw"></i></li>
           <li class="animated"><i class="fa fa-twitter fa-fw"></i></li>
           <li class="animated"><i class="fa fa-linkedin fa-fw"></i></li>
           <li class="animated"><i class="fa fa-google-plus fa-fw"></i></li>
           <li class="animated"><i class="fa fa-github fa-fw"></i></li>
         </ul>
       </div>

     </footer>
     
     <div class="overlay">
       <button class="overlay-close"></button>
       <nav>
         <ul>
           <li><a href="#header">Home</a></li>
           <li><a href="#features">Feature</a></li>
           <li><a href="#special">Speciality</a></li>
           <li><a href="#intro-carousel">Gallery</a></li>
           <li><a href="#testimonial">Testimonial</a></li>
           <li><a href="#footer">Contact Us</a></li>
         </ul>
       </nav>
     </div>

    <span class="totop"><i class="fa fa-chevron-up"></i></span>
    <script src="js/jquery-3.3.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl-carousel.js"></script>
    <script src="js/totop.min.js"></script>
    <script src="js/demo2.min.js"></script>
   </body>
</html>